﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquery-1.11.2.min.js"></script>
    <style type="text/css">
        .navigation {
            width: 100%;
            height: 30px;
            border: 1px solid red;
        }

            .navigation div[tag=item] {
                float: left;
                background-color: white;
                margin-left: 30px;
                margin-top: 6px;
                border: 1px solid blue;
                cursor: pointer;
            }

            .navigation div[tag=info] {
                float: left;
                background-color: white;
                margin-left: 30px;
                margin-top: 6px;
                border: 1px solid blue;
                cursor: pointer;
            }

            .navigation select[tag=sel] {
                float: left;
                background-color: white;
                margin-left: 30px;
                margin-top: 6px;
                border: 1px solid blue;
            }

        .item_tab {
            width: 100%;
            height: 30px;
            margin-top: 10px;
            float: left;
        }

            .item_tab div {
                border: 1px solid black;
                float: left;
                margin-left: 30px;
            }

        .tab {
            width: 100%;
            height: 100%;
            border-left: 1px solid #ababab;
            border-top: 1px solid #ababab;
        }

            .tab th {
                border-width: 1px;
                padding: 8px;
                border-style: solid;
                border-color: #666666;
                background-color: #dedede;
            }

            .tab td {
                border-right: 1px solid #ababab;
                border-bottom: 1px solid #ababab;
                padding: 10px;
                text-align: center;
            }
    </style>
</head>
<body>
    <div id="d1"></div>
</body>
</html>
<script>
    var analysisJSON = function (parmas) {
        this._d = [];
        this._dataReference = null;
        this._resultPath = [];

        this.isArray = false;
        this.isJson = false;
        var that = this;

        this.defalutParmas = {
            url: "",
            color: "green",
            size: 10,
            containerId: null
        };

        this.getData = function () {
            $.ajax({
                url: this.defalutParmas.url,
                dataType: 'script',
                success: function (data) {
                    eval(data);
                    that._dataReference = result;
                    console.log("result js file[" + that.defalutParmas.url + "]load completed");
                }
            });
        }

        this.checkResultFileCompleted = function () {
            if (that._dataReference != null && that._dataReference.data) {
                for (var i = 0; i < that._dataReference.data.length; i++) {
                    that.commonUtils.loadJsonFromJsFile(that._dataReference.data[i].url);
                }
                return;
            }
            console.log(1);
            var arg = arguments.callee;
            window.setTimeout(arg, 100);
        }

        this.checkSubfileLoadCompleted = function () {
            if (that._dataReference != null && this._d.length == that._dataReference.data.length) {
                this.init();
                return;
            }
            console.log(2);
            var arg = arguments;
            window.setTimeout(function () { arg.callee.apply(that, arg); }, 100);
        }

        this.loadCompleted = function () {

            this.getData();
            this.checkResultFileCompleted();
            this.checkSubfileLoadCompleted();
        }

        this.init = function () {
            if (this.commonUtils.checkFormat(this._d[0])) {
                this.getNavigation();
                $("#tableContainer").append($(this.getHTML(this._d[0])));
                $("#" + this.defalutParmas.containerId).find("div[tag=item]").eq(0).css("background-color", "red");
                this.regEvent();
            }
        }

        this.getNavigation = function () {
            var html = "";
            html += "<div class='navigation'>";
            for (var i = 0; i < this._d.length; i++) {
                html += "<div index='" + i + "' tag='item'>V" + (i + 1) + "</div>";
            }
            html += "<select tag='sel'>";
            for (var i = 0; i < this._d.length; i++) {
                html += "<option value='" + i + "'>V" + (i + 1) + "</option>";
            }
            html += "</select>";
            html += "<div style='float:left;width:105px;margin-top:6px;margin-left:30px;'>Compare With:</div>"
            html += "<select tag='sel'>";
            for (var i = 0; i < this._d.length; i++) {
                html += "<option value='" + i + "'>V" + (i + 1) + "</option>";
            }
            html += "</select>";

            html += "<div tag='info' status='noFix'>依然存在的</div>";
            html += "<div tag='info' status='fixxed'>已经解决的</div>";
            html += "<div tag='info' status='reproduce'>复现了的</div>";
            html += "<div tag='info' status='newAdd'>新增的</div>";

            html += "</div>";
            html += "<div id='tableContainer'></div>";

            $("#" + this.defalutParmas.containerId).append($(html));
        }

        this.regEvent = function () {
            document.getElementById(this.defalutParmas.containerId).addEventListener("click", function (e) {
                var target = e.target;
                if (target.tagName.toLowerCase() == "div" && target.getAttribute("tag") == "item") {
                    $("#" + that.defalutParmas.containerId).find("div[tag=item]").css("background-color", "white");
                    $("#" + that.defalutParmas.containerId).find("div[tag=info]").css("background-color", "white");
                    target.style.backgroundColor = "red";
                    var index = parseInt(target.getAttribute("index"));
                    var data = that._d[index];
                    $("#tableContainer").html(that.getHTML(data));
                }
                if (target.tagName.toLowerCase() == "div" && target.getAttribute("tag") == "info") {
                    var sel1Val = $("#" + that.defalutParmas.containerId).find("select").eq(0).val();
                    var sel2Val = $("#" + that.defalutParmas.containerId).find("select").eq(1).val();
                    if (sel1Val == sel2Val) {
                        alert("Please choose the different version");
                        return;
                    }
                    $("#" + that.defalutParmas.containerId).find("div[tag=item]").css("background-color", "white");
                    $("#" + that.defalutParmas.containerId).find("div[tag=info]").css("background-color", "white");
                    target.style.backgroundColor = "red";

                    $("#tableContainer").html(that.getHTML(that.compare(that._d[sel1Val], that._d[sel2Val], target.getAttribute("status"))));
                }

            }, false);
        }

        this.compare = function (arr1, arr2, status) {
            var res = [];
            switch (status) {
                case "noFix":
                    for (var i = 0; i < arr1.length; i++) {
                        if (arr1[i].assertions.length > 0 && arr1[i].assertions[0].passed == false) {
                            for (var j = 0; j < arr2.length; j++) {
                                if (arr2[j].assertions.length > 0 && arr1[i].description == arr2[j].description && arr2[j].assertions[0].passed == false) {
                                    res.push(arr1[i]);
                                }
                            }
                        }
                    }
                    break;
                case "fixxed":
                    for (var i = 0; i < arr1.length; i++) {
                        if (arr1[i].assertions.length > 0 && arr1[i].assertions[0].passed == false) {
                            for (var j = 0; j < arr2.length; j++) {
                                if (arr2[j].assertions.length > 0 && arr1[i].description == arr2[j].description && arr2[j].assertions[0].passed == true) {
                                    res.push(arr2[j]);
                                }
                            }
                        }
                    }
                    break;
                case "reproduce":
                    for (var i = 0; i < arr1.length; i++) {
                        if (arr1[i].assertions.length > 0 && arr1[i].assertions[0].passed == true) {
                            for (var j = 0; j < arr2.length; j++) {
                                if (arr2[j].assertions.length > 0 && arr1[i].description == arr2[j].description && arr2[j].assertions[0].passed == false) {
                                    res.push(arr2[j]);
                                }
                            }
                        }
                    }
                    break;
                case "newAdd":
                    for (var i = 0; i < arr2.length; i++) {
                        var bl = true;
                        for (var j = 0; j < arr1.length; j++) {
                            if (arr2[i].description == arr1[j].description) {
                                bl = false;
                                break;
                            }
                        }
                        if (bl) {
                            res.push(arr2[i]);
                        }
                    }
                    break;
                default:
                    break;
            }
            return res;
        }

        this.getHTML = function (arr) {
            $("#tableContainer").html("");

            var html = "<table class='tab'><tr><td>description</td><td>passed</td><td>errorMsg</td><td>stackTrace</td><td>duration</td></tr>";
            for (var i = 0; i < arr.length; i++) {
                if (arr[i].assertions.length == 0) {
                    continue;
                }
                if (arr[i].assertions[0].passed) {
                    html += "<tr style='background-color:" + this.defalutParmas.color + ";'>";
                } else {
                    html += "<tr>";
                }
                html += "<td>" + arr[i].description + "</td>";
                html += "<td>" + arr[i].assertions[0].passed + "</td>";
                html += "<td>" + this.commonUtils.cutString(arr[i].assertions[0].errorMsg, this.defalutParmas.size) + "</td>";
                html += "<td>" + this.commonUtils.cutString(arr[i].assertions[0].stackTrace, this.defalutParmas.size) + "</td>";
                html += "<td>" + arr[i].duration + "</td>";
                html += "</tr>";
            }
            html += "</table>";
            return html;
        }

        this.commonUtils = {
            cutString: function (str, num) {
                if (str == "" || str == undefined) {
                    return "";
                }
                return str.substring(0, num) + ".....";
            },
            extend: function (target, source) {
                for (var p in source) {
                    if (source.hasOwnProperty(p)) {
                        target[p] = source[p];
                    }
                }
                return target;
            },
            checkFormat: function (arr) {
                this.isArray = arr instanceof Array;
                if (this.isArray && arr.length > 0) {
                    this.isJson = typeof (arr[0]) == "object" && Object.prototype.toString.call(arr[0]).toLowerCase() == "[object object]" && !arr[0].length;
                }

                if (this.isArray && this.isJson) {
                    return true;
                }
                else {
                    return false;
                }
            },
            loadJsonFromJsFile: function (url) {
                $.ajax({
                    url: url,
                    dataType: 'script',
                    success: function (data) {
                        var d = eval(data);
                        that._d.push(d);
                        console.log("sub js file[" + url + "]load completed");
                    }
                });
            }
        }
        this.commonUtils.extend(this.defalutParmas, parmas);
    }

    var r = new analysisJSON({ url: "result.js", containerId: "d1", color: "green", size: 20 });
    r.loadCompleted();
</script>
